
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
   
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>公告管理</title>
    <link rel="stylesheet" href="/resources/lib/layui-v2.6.3/css/layui.css">
    <script type="text/javascript" src="/resources/lib/layui-v2.6.3/layui.js"></script>
<!--<%&#45;&#45;    还要引入这个js样式&#45;&#45;%>-->
    <script src="/resources/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script type="text/html" id="topToolbar">
        <div class="layui-btn-group">
            <button lay-event="addOne" class="layui-btn layui-btn-checked"><i class="layui-icon layui-icon-add-1"/>添加
            </button>


        </div>
    </script>

    <script type="text/html" id="rowToolbar">
        <div class="layui-btn-group">
            <button lay-event="update" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-edit"/>修改
            </button>
            <button lay-event="del" class="layui-btn layui-btn-danger"><i class="layui-icon layui-icon-delete"/>删除
            </button>
        </div>
    </script>
    <script type="text/javascript">
        layui.use(['table', 'layer', 'laydate', 'jquery','wangEditor'], function () {
            let table = layui.table;
            let $ = layui.jquery;
            let layer = layui.layer;
            let form = layui.form;

            let wangEditor = layui.wangEditor;
            // 这个content为富文本div的
            let content = new wangEditor('#content');
            content.create();
            //渲染数据表格
            let noticeTable = table.render({
                elem: "#scoresTable",
                cols: [ [
                    {field: 'aaa', type: "checkbox"},
                    {field: 'bbb', title: '序号', width: 80, type: "numbers"},
                    {field: 'id', title: '主键', width: 80},
                    {field: 'title', title: '标题', width: 80},
                    {field: 'content', title: '内容', width: 80},
                    {field: 'createTime', title: '创建时间', width: 150},
                    {field: 'eee', title: '操作', width: 300, toolbar: "#rowToolbar"},
                ] ],
                url: "/notice/list.do",
                page: true,
                limit: 2,
                limits: [2, 4, 6],
                toolbar: "#topToolbar"

            })
            //from监听模糊查询
            // 表单事件
            //给提交按钮添加提交事件  lay-filter值为按钮的lay-filter值
            form.on("submit(submitfilter)", function (obj) {

                let data = obj.field;
                noticeTable.reload({
                    where: data
                })
                return false;
            });

            //监听表头的事件
            table.on("toolbar(noticeTable)", function (obj) {
                console.log(obj);
                switch (obj.event) {
                    case 'addOne':
                        openAddLayer();//打开添加的弹出层
                        break;
                }
            });
            //监听行工具条的事件
            table.on('tool(noticeTable)', function (obj) {
                switch (obj.event) {
                    case 'update':
                        openUpdateLayer(obj.data)
                        break;
                    case 'del':
                        layer.confirm("您确定要删除【" + obj.data.title + "】这个公告吗？", {icon: 3, title: '提示'}, function () {
                            $.post("/notice/deleteNoticeByid.do", {id: obj.data.id}, function (res) {
                                layer.msg(res.msg);
                                if (res.code == 200) {
                                    //刷新表格
                                    noticeTable.reload();
                                }
                            })
                        })

                }
            });

            //打开添加的弹出层的方法
            let url; //提交的URL
            let mainIndex; //当前弹出层的index
            function openAddLayer() {
                mainIndex = layer.open({
                    type: 1,//页面层
                    title: '添加公告',
                    content: $("#addOrUpdateForm"),
                    // content内容为最外层弹出div的id值  addOrUpdateForm
                    area: ['600px', '600px'],
                    success: function () {
                        // 当你需要在层创建完毕时即执行一些语句
                        //因为共用同一个表单
                        //重置按钮
                        $("#doReset").click();
                        //清空富文本里的内容
                        content.txt.html("");
                        url = "/notice/addNotice.do";
                    }
                })
            }

            //打开修改的弹出层的方法
            function openUpdateLayer(data) {
                mainIndex = layer.open({
                    type: 1,//页面层
                    title: '修改[' + data.title + ']公告',
                    content: $("#addOrUpdateForm"),
                    area: ['400px', '300px'],
                    success: function () {
                        //回显数据
                        form.val('dataFrm', data);
                        //回显富文本
                        content.txt.html(data.content)
                        url = "/notice/updateNotice.do";
                    }
                })
            }

            //监听提交事件也就是弹出层引用的同一个表单,这个是弹出层表单
            form.on("submit(doSubmit)", function (obj) {
                let data = obj.field;
                //得到富文本里的内容
                data.content=content.txt.html();
                //提交
                $.post(url, data, function (res) {
                    layer.msg(res.msg);
                    if (res.code == 200) {
                        //刷新表格
                        noticeTable.reload();
                        //关闭弹出层
                        layer.close(mainIndex);
                    }
                })
                return false;
            })
        })

    </script>
</head>
<body>
<!--<%&#45;&#45;数据表格上方的表单&#45;&#45;%>-->
<blockquote class="layui-elem-quote">
    <form class="layui-form" id="searchFrm" lay-filter="searchFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline">
                <input type="text" name="title" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button lay-filter="submitfilter" class="layui-btn " lay-submit><i class="layui-icon layui-btn-ok"></i>查询
                </button>
                <button type="reset" class="layui-btn layui-btn-danger"><i class="layui-icon layui-btn-close"></i>重置
                </button>
            </div>
        </div>
    </form>
</blockquote>

<table id="scoresTable" lay-filter="noticeTable">

</table>

<!--<%&#45;&#45;&lt;!&ndash; 弹出层开始 &ndash;&gt;&#45;&#45;%>-->
<div id="addOrUpdateForm" style="display: none;margin: 5px">
    <form class="layui-form" id="dataFrm" lay-filter="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="text" name="title" lay-verify="required" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <%--                id为name值--%>
                <div id="content"  nonce="content" style="margin: 50px 0 50px 0">
                    <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <input type="button" value="提交" class="layui-btn" lay-submit id="doSubmit" lay-filter="doSubmit">
            <input type="reset" value="重置" id="doReset" class="layui-btn layui-btn-danger">
        </div>
    </form>
</div>
<!-- 弹出层结束-->
</body>
</html>